<template>
    <div class="signeList">
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <Select class="w-select" v-model="statisticType" placeholder="统计类型"  @on-change="typeChange">
                        <Option
                            v-for="item in statisticList"
                            :value="item.id"
                            :key="item.id"
                            style='text-align:center'
                        >{{item.name}}</Option>
                    </Select>
                </div>
                <div class="margin-up-down">
                    <DatePicker type="daterange" v-model="time" placement="bottom-start" placeholder="请选择服务时间" separator='至' format="yyyy-MM-dd" style="width: 200px;z-index:999"></DatePicker>
                </div>
                <div class="margin-up-down">
                    <Button type="primary" @click="loadPage(1)" class="btn">
                        <Icon type="ios-search" size="14"/>
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Button icon="icon-gengxin" @click="reset" class="btn">
                        <i class = "iconfont icon-gengxin" style="font-size:16px;margin-left:-8px;"></i>
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Button @click='fileDownload' icon="ios-download-outline" type="primary" style="background-color: #5362e1; border: none;">导出报表</Button>
                </div>
            </Col>
        </Row>
        <h3 style="text-align: center; margin: 15px 0; font-weight:600">{{text}}</h3>
        <!-- <Table class="m-table" stripe :columns="columns" :data="dataList"></Table> -->
        <table class="m-table table-hover">
            <tr class="title">
                <th style="">排序</th>
                <th v-for="(item,index) in columnName">{{item}}</th>
            </tr>
            <tr class="title hang" v-for="(p,index) in dataList">
                <td>{{index+1}}</td>
                <td v-for="value in p.columnValue">{{value}}</td>
            </tr>
            <tr class="title hang">
                <td></td>
                <td v-if="zj.length">合计：</td>
                <td v-for="value in zj">{{value}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import { DatePicker } from "view-design";
import api from "@/api/commonApi";
import Utils from "@/utils";

export default { 
    data() {
        return {
            statisticList: [
                { id: 1, name: "按人群分类统计" },
                { id: 2, name: "按服务方式统计" },
                { id: 3, name: "按服务内容统计" },
            ],
            statisticType: 1,
            text: '家庭医生履约服务统计报表（按人群分类统计）',
            time: [],
            columnName: [],
            columns: [
                {
                    title: "排序",
                    key: "sum",
                    width: 80,
                    align: "center",
                    render: (h, params) => {
                        let sum = (this.pageNo - 1) * this.pageSize + params.index + 1;
                        return h("span", sum);
                    },
                },
                { title: "服务机构名称", key: "name", align: "center", 
                    render:(h,params) => {
                        let row = params.row;
                        console.log(row)
                    }
                },
            ],
            dataList: [],
            zj: [],
        };
    },
    components: {
        DatePicker,
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/ordersmanagement/index",
                title: "订单管理"
            },
            {
                path: "/index/comprehensive/registration/list",
                title: "预约挂号订单"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        //上来就加载第一页数据
        this.loadPage(1);
    },
    methods: {
        typeChange() {
            if(this.statisticType == 1) {
                this.text = '家庭医生履约服务统计报表（按人群分类统计）'
            } else if(this.statisticType == 2) {
                this.text = '家庭医生履约服务统计报表（按服务方式统计）'
            } else {
                this.text = '家庭医生履约服务统计报表（按服务内容统计）'
            }
        },
        //加载列表数据
        loadPage(pageNo) {
            this.fromTime = Utils.getNowDateBySpecialFormat(this.time[0]);
            this.endTime = Utils.getNowDateBySpecialFormat(this.time[1]);
            let params = {
                type: this.statisticType,
                fromTime: this.fromTime,
                endTime: this.endTime,
            }             
            this.$axios.post(api.recordReport, params).then(resp => {
                if (resp.data.success) {
                    let ret = resp.data.object;
                    if(ret && ret.columnName){
                        this.columnName = ret.columnName;
                        this.dataList = ret.columnValueList;
                        let aa = []
                        this.columnName.forEach((r,index) =>{
                            aa.push(0);                             
                        })
                        this.dataList.forEach((item,index) => {  
                            item.columnValue.forEach((g,index) =>{
                                aa.splice(index,1,aa[index]+parseInt(g))
                            })  
                        })
                        this.zj = aa
                        this.zj.shift()        //去掉数组中第一个元素（服务机构名称）
                    } else {
                        this.dataList = [];
                        this.zj = [];
                        this.$Message.error("暂无数据");
                    }                       
                } else {
                    this.dataList = [];
                    this.zj = [];
                    this.$Message.error("暂无数据");
                }      
            })
            .catch(err => {
                console.log(err);
            });
        },
        //清除
        reset() {
           this.time = []
           this.statisticType = 1
           this.loadPage(1);
        },
        // 下载导出信息
        fileDownload () {
            let url = api.recordReportExport
            this.fromTime = Utils.getNowDateBySpecialFormat(this.time[0]);
            this.endTime = Utils.getNowDateBySpecialFormat(this.time[1]);
            let params = {
                type: this.statisticType,
                fromTime: this.fromTime,
                endTime: this.endTime,
            }           
            const link = document.createElement('a')
            this.$axios.post(url, params, { responseType: "arraybuffer" }).then(res =>{
                if (res.data) {
                    let ret = res.data;
                    // var blob = new Blob([ret],{ type:"application/vnd.ms-excel" });
                    // let objUrl = URL.createObjectURL(blob);
                    // window.location.href = objUrl;
                    let blob = new Blob([ret], {type: "application/vnd.ms-excel"})
                    let objectUrl = URL.createObjectURL(blob) // 创建URL
                    link.href = objectUrl
                    link.download = this.text // 自定义文件名
                    link.click() // 下载文件
                    URL.revokeObjectURL(objectUrl); // 释放内存
                }
            })
        },
    }
};
</script>
<style lang="less" scoped>
.signeList {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    min-height: 600px;
    .w-select {
        width: 150px;
    }
    .m-table {
        margin: 10px 0;
        border: 1px solid #dddee1;
        font-size: 12px;
        color: #495060;
        text-align: center;
        width: 100%;
        .title {           
            // display: flex; 
            // justify-content: center;           //水平居中
            // align-items: center;            //垂直居中
            height: 40px;
            th,td {          
                width: 200px;
                text-overflow: ellipsis;
                vertical-align: middle;
                text-align: center;
                border-bottom: 1px solid #e9eaec;
                padding: 0 10px;
                font-size: 12px;
                color: #495060;
            }
            th {
                background-color: #f8f8f9;
            }
        }
        .title :first-child {
            width: 80px;
        }
        .hang:hover{
            background: #ebf7fc;
        }
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        width: 50px;
        height: 32px;
        line-height: 18px;
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
    
}

</style>